<!-- 经营数据 -->
<template>
	<view class='pages'>
		<!-- banner -->
		<view class="pages-banner row-box bgc-w">
			<view class="banner-item" v-for="(item,index) in pagesBanner" :key="index" @click="">
				<image :src="item.bgimg" mode="scaleToFill" class="banner-item-img"></image>
				<view class="pl-20 pr-20 mt-20  flex align-items-center relative" style="z-index: 1;">
					<text class="fw-6" :style="{color:item.color}">{{item.title}}</text>
					<text class="iconfont" :style="{color:item.color}">&#xe687;</text>
				</view>
				<view class="pl-20 pr-20 flex align-items-center fs-sm relative" style="z-index: 1;font-size: 22rpx;"
					:style="{color:item.color}">
					{{item.text}}
				</view>
			</view>
		</view>
		<!-- 搜索 -->
		<!-- <view class="search-box flex">
			<p-search style="height: 80rpx;" />
		</view> -->
		<!-- Tabber -->
		<view class="tabber-box flex align-items-center bgc-w">
			<view class="tabber-item mr-40" :class="{'tabber-item-ac':index==tabIndex}" v-for="(item,index) in tabber"
				:key="index" @click="changeTab(index)">
				<text class="title">{{item.title}}</text>
				<text class="link"></text>
			</view>
		</view>
		<!-- 排序 暂时先不做 -->
		<!-- <view class="state-box row-box bgc-w pl-30 pr-30 ">
			<view class=" flex align-items-center justify-content-center " :class="{'state-item-ac':index==stateIndex}"
				v-for="(item,index) in stateList" :key="index " @click="changeState(index)">
				<text>
					{{item.title}}
					<text class="iconfont" v-if="item.sort=='all'">&#xe612;</text>
					<text class="iconfont" v-if="item.sort=='rise'">&#xe622;</text>
					<text class="iconfont" v-if="item.sort=='fall'">&#xe621;</text>
				</text>
			</view>
		</view> -->
		<!-- 数据 -->
		<view class="list-box " v-if="tabIndex==0">
			<view class="tips mb-20 bgc-w">
				顾客 共<text class="fc-warn">{{total}}</text>人
			</view>
			<p-customer-item v-for="(item,index) in pagesList" :key="index" class="mb-30" :info='item'
				@sendChat='sendChat' />
			<view class="" v-if="!pagesList.length">
				<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
			</view>
		</view>
		<view class="list-box " v-if="tabIndex==1">
			<view class="tips mb-20 bgc-w">
				社群 共<text class="fc-warn">{{total}}</text>群
			</view>
			<p-association-item v-for="(item,index) in pagesList" :key="index" class="mb-30" :info='item'
				@sendGroup='sendGroup' />
			<view class="" v-if="!pagesList.length">
				<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
			</view>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
	</view>
</template>

<script>
	import {
		apiCustomerList,
		apiGroupList,
	} from '@/api/customer.js'
	export default {
		data() {
			return {
				// 顶部tabber分类激活的索引
				tabIndex: 0,
				// 状态激活的索引
				stateIndex: 0,
				//关键字
				keyword: '',
				// 状态
				stateList: [],
				// 当前页数
				page_no: 1,
				// 列表
				pagesList: [],
				// 总数
				total: 0,
			};
		},
		async onLoad() {
			this.setStateList()
			await this.resetList()
		},
		async onShow() {
			await this.$onLaunched;
			this.$qwJssdk.init(['openEnterpriseChat', 'openExistedChatWithMsg'])
		},
		onReachBottom() {
			this.page_no++
			this.getPagesList()
		},
		onPullDownRefresh() {
			this.resetList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async getPagesList() {
				if (this.tabIndex == 0) {
					let res = await apiCustomerList({
						page_no: this.page_no,
						page_size: 10,
					})
					this.total = res.total
					this.pagesList.push(...res.list)
				} else {
					let res = await apiGroupList({
						page_no: this.page_no,
						page_size: 10,
					})
					this.total = res.total
					this.pagesList.push(...res.list)
				}
			},
			resetList() {
				this.page_no = 1
				this.pagesList = []
				this.getPagesList()
			},
			sendChat(externalUserIds) {
				this.$ww.openEnterpriseChat({
					externalUserIds: [externalUserIds]
				})
			},
			sendGroup(chatId) {
				this.$ww.openExistedChatWithMsg({
					chatId
				})
			},

			// 设置状态列表
			setStateList() {
				this.stateList = [{
					title: '全部',
					sort: 'all'
				}, {
					title: '待配送',
					sort: 'all'
				}, {
					title: '待核销/待自提',
					sort: 'all'
				}, {
					title: '退款售后',
					sort: 'all'
				}, ]
			},
			// 切换tabber
			changeTab(index) {
				this.tabIndex = index
				this.resetList()
			},
			// 切换状态
			changeState(index) {
				if (this.stateIndex == index) {
					if (this.stateList[this.stateIndex].sort == 'all') {
						this.stateList[this.stateIndex].sort = 'rise'
						return
					}
					if (this.stateList[this.stateIndex].sort == 'rise') {
						this.stateList[this.stateIndex].sort = 'fall'
						return
					}
					if (this.stateList[this.stateIndex].sort == 'fall') {
						this.stateList[this.stateIndex].sort = 'all'
						return
					}
				} else {
					this.stateList[this.stateIndex].sort = 'all'
					this.stateIndex = index
					this.stateList[this.stateIndex].sort = 'all'
				}
			},
			// 搜索
			onSearch() {

			}
		},
		computed: {
			placeholderStyle() {
				return {
					fontSize: '28rpx',
					color: '#999',
				}

			},
			tabber() {
				return [{
						title: '顾客'
					},
					{
						title: '社群'
					},
				]
			},
			pagesBanner() {
				return [{
						title: '顾客数据',
						text: '增长趋势',
						color: '#107A6E',
						bgimg: '/static/images/customer/icon-1.png',
						page: ''
					},
					{
						title: '顾客标签',
						text: '标记特征, 丰富画像',
						color: '#92591E',
						bgimg: '/static/images/customer/icon-2.png',
						page: '/pages/customer/customerTags'
					},
					{
						title: '分组运营',
						text: '精准运营',
						color: '#1353A9',
						bgimg: '/static/images/customer/icon-3.png',
						page: '/pages/customer/customerOperations'
					},
				]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages-banner {
		width: 750rpx;
		padding: 20rpx;

		.banner-item {
			width: 226rpx;
			height: 136rpx;
			background-color: #ededed;
			border-radius: 18rpx;
			ovherflow: hidden;
			position: relative;

			.banner-item-img {
				width: 226rpx;
				height: 136rpx;
				top: 0;
				left: 0;
				position: absolute;
				z-index: 0;
			}
		}
	}

	.search-box {
		width: 100%;
		height: 100%;
		padding: 20rpx;
		background-color: #fff;
	}

	.tabber-box {
		padding: 0 20rpx;
		height: 90rpx;

		.tabber-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.link {
				opacity: 0;
				width: 36rpx;
				height: 6rpx;
				border-radius: 10rpx;
				background: #00A191;
			}
		}

		.tabber-item-ac {
			.title {
				font-size: 36rpx;
				line-height: 52rpx;
				font-weight: bold;
				color: #333333;
			}

			.link {
				opacity: 1;
			}
		}
	}

	.state-box {
		height: 80rpx;

		.state-item {
			flex: 1;
		}

		.state-item-ac {
			text {
				color: #333;
				font-weight: 900;
			}
		}
	}

	.list-box {


		.tips {
			padding: 0 20rpx;
			line-height: 96rpx;
		}
	}
</style>